<template>
  <div class="main">
    <video
      id="player-container-id"
      width="800"
      height="600"
      preload="auto"
      playsinline
      webkit-playsinline
    ></video>
  </div>
</template>

<script setup>
import { onMounted } from "vue";

onMounted(() => {
  if (!window.TCPlayer) {
    //直播
    loadScript(
      "https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/TXLivePlayer-1.2.3.min.js",
      (state) => {
        if (state !== "success") {
          console.log("直播组件加载失败");
          return false;
        } else {
          console.log("直播插件载入成功");
          // 'https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/hls.min.1.1.5.js'
          loadScript(
            "https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/hls.min.1.1.5.js",
            (state) => {
              if (state !== "success") {
                console.log("直播组件加载失败");
                return false;
              } else {
                console.log('hls');
              }
            }
          );
          //播放器
          loadScript(
            "https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.v4.6.0.min.js",
            (state) => {
              if (state !== "success") {
                console.log("直播组件加载失败");
                return false;
              } else {
                init();
              }
            }
          );
        }
      }
    );
  } else {
    init();
  }
});
const init = () => {
  const player = new TCPlayer("player-container-id", {});
  console.log(player);
  player.src(
    "webrtc://mkpxy.cn/live/az?txSecret=1fe1ec532cea0256cc296bc1ce4754ac&txTime=644A2756"
  );
};

const loadScript = (url, callback) => {
  const script = document.createElement("script");
  const fn = callback || function () {};
  script.type = "text/javascript";
  if (script.readyState) {
    script.onreadystatechange = function () {
      if (script.readyState === "loaded" || script.readyState === "complete") {
        script.onreadystatechange = null;
        fn("success");
      }
    };
  } else {
    script.onload = function () {
      fn("success");
    };
    script.onerror = function () {
      fn("fail");
    };
  }
  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
};
</script>

<style scoped>
@import "https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css";
</style>
